<template>
	<view class="container">
		<video
			id="videoContainer"
			class="video"
			:src="currentVideo.reviewUrl"
			@play="videoPlay"
			@pause="videoPause"
			@ended="videoEnded"
			controls>
		</video>
	</view>
</template>

<script>
	import { reportPlayTime } from '@/api/album.js';
	export default{
		name: 'openLiveReview',
		data(){
			return{
				///播放器
				videoContext: '',
				//当前页面Id
				Id: '',
				//待播放视频列表
				videoSrc: [],
				//当前播放的视频
				currentVideo: {},
				//定时器
				timer: '',
				//观看时间
				costTime: 0,
				//上报间隔
				pointTime: 1,
				//播放时长上报次数
				reportIndex: 1
			}
		},
		onLoad(e) {
			this.videoContext = uni.createVideoContext('videoContainer', this)
			this.Id = e.Id
			this.getInitData().then(resp=>{
				this.videoSrc = resp.result.items
				uni.setNavigationBarTitle({
					title: resp.result.openLiveName
				})
				if(this.videoSrc.length > 0){
					this.currentVideo = this.videoSrc[0]
				}
			})
		},
		onHide() {
			clearInterval(this.timer)
			this.costTime = 0
		},
		onUnload() {
			clearInterval(this.timer)
			this.costTime = 0
		},
		watch:{
			costTime(e){
				if( e % (this.pointTime * 60) == 0 ){
					reportPlayTime(this.reportIndex, this.Id, this.Id, this.pointTime, 4)
					this.reportIndex++
				}
			}
		},
		methods:{
			getInitData(){
				return this.$http.request({
					url: 'api/OpenLive/GetOpenLiveReview',
					method: 'GET',
					allow: true,
					showLoading: false,
					data: {
						Id: this.Id
					}
				})
			},
			//结束
			videoEnded(){
				let index = this.videoSrc.indexOf(this.currentVideo)
				if(index == this.videoSrc.length - 1){
					this.currentVideo = this.videoSrc[0]
					return
				}else{
					this.currentVideo = this.videoSrc[index + 1]
					setTimeout(()=>{
						this.videoContext.play()
					}, 200)
				}
			},
			//播放
			videoPlay(){
				this.timer = setInterval(()=>{
					this.costTime++
				}, 1000)
			},
			//暂停
			videoPause(){
				clearInterval(this.timer)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #121212;
		height: 100vh;
		.video{
			width: 100%;
			height: 400rpx;
		}
	}
</style>
